<template>
	<div class="top">
		<h3>基础信息</h3>
		<form class="f_top">
			<el-form-item label="区域" style="width: 400px;">
				<el-cascader v-model="lastNumber.xz" :options="options" :props="props1" clearable />
			</el-form-item>
			<el-form-item label="房号" style="width: 400px;">
				<el-input v-model="form.houseNumber" placeholder="输入房号,如201" />
			</el-form-item>
			<el-form-item label="所在楼层" style="width: 400px;">
				<el-input v-model="form.floor" placeholder="输入楼层" />
			</el-form-item>
			<el-form-item label="地址" style="width: 400px;">
				<el-input v-model="form.address" placeholder="输入地址" />
			</el-form-item>
			<el-form-item label="建筑面积" style="width: 400px;">
				<el-input v-model="form.areaBuilding" placeholder="输入面积" />
			</el-form-item>
			<el-form-item label="套内面积" style="width: 400px;">
				<el-input v-model="form.areaInterior" placeholder="输入面积" />
			</el-form-item>
			<el-form-item label="备注(选填)" style="width: 400px;">
				<el-input type="textarea" placeholder="备注" />
			</el-form-item>
		</form>
	</div>

	<div class="button">
		<h3>房屋状态</h3>
		<form class="f_button">
			<el-form-item label="销售状态" class="xz" style="width: 800px;">
				<el-select v-model="form.saleStatus" placeholder="请选择销售状态" style="width: 200px;right: 5px;">
					<el-option label="已销售" value="已销售" />
					<el-option label="未销售" value="未销售" />
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="form.saleDate" type="date" placeholder="选择销售日期" style="width: 100%" />
					</el-col>
				</el-form-item>
			</el-form-item>
			<el-form-item label="收楼状态" class="xz" style="width: 800px;">
				<el-select v-model="form.handoverStatus" placeholder="请选择收楼状态" style="width: 200px;right: 5px;">
					<el-option label="已收楼" value="已收楼" />
					<el-option label="未收楼" value="未收楼" />
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="form.handoverDate" type="date" placeholder="选择收楼日期" style="width: 100%" />
					</el-col>
				</el-form-item>
			</el-form-item>
			<!-- <el-form-item label="合同应收楼日期" class="xz" style="width: 800px;">
				<el-form-item>
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择合同应收楼日期" style="width: 100%" />
					</el-col>
				</el-form-item>
			</el-form-item> -->
			<el-form-item label="装修状态" class="xz" style="width: 800px;">
				<el-select v-model="form.renovationStatus" placeholder="请选择装修状态" style="width: 200px;right: 5px;">
					<el-option label="已装修" value="已装修" />
					<el-option label="未装修" value="未装修" />
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="form.renovationDate" type="date" placeholder="选择装修日期" style="width: 100%" />
					</el-col>
				</el-form-item>
			</el-form-item>
			<el-form-item label="入住状态" class="xz" style="width: 800px;">
				<el-select v-model="form.occupancyStatus" placeholder="请选择入住状态" style="width: 200px;right: 5px;">
					<el-option label="已入住" value="已入住" />
					<el-option label="未入住" value="未入住" />
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="form.occupancyDate" type="date" placeholder="选择入住日期" style="width: 100%" />
					</el-col>
				</el-form-item>
			</el-form-item>
			<el-form-item label="使用状态" style="width: 250px;">
				<el-select v-model="form.usageStatus" placeholder="自住">
					<el-option label="闲置" value="闲置" />
					<el-option label="其他" value="其他" />
				</el-select>
			</el-form-item>
			<el-form-item label="房屋标签" style="width: 400px;">
				<el-select v-model="form.houseLabel" placeholder="请选择房屋标签">
					<el-option v-for="item in data.biaoqian" :key="item.houseLabel" :label="item.houseLabel" :value="item.houseLabel"></el-option>
				</el-select>
			</el-form-item>
		</form>
	</div>
	<div class="conmit">
		<el-button class="but1">取消</el-button>
		<el-button class="but2" @click="save">确定</el-button>
	</div>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted} from 'vue';
	import $http from '../router/AxiosApi';
	import {
		useRouter
	} from 'vue-router'
	import type {
		ComponentSize
	} from 'element-plus';
	const router = useRouter()
	const data=reactive({
		houses:'',
		biaoqian:[]
	})
	const form=reactive({
		region:'',
		houseNumber:'',
		floor:'',
		address:'',
		areaBuilding:'',
		areaInterior:'',
		saleStatus:'',
		saleDate:'',
		handoverStatus:'',
		handoverDate:'',
		renovationStatus:'',
		renovationDate:'',
		usageStatus:'',
		houseLabel:'',
		occupancyStatus:'',
		occupancyDate:'',
			houseId: '',
			unitId: '',
			buildingId: '',
			regionId: '',
			billingItemsName: ''
	})
	const lastNumber = reactive({
		xz: ''
	})
	const props1 = {
		checkStrictly: true,
	}
	const options = reactive([]);
	onMounted(() => {
		loadAll()
		loadBiaoQian()
	})
	const save = () => {
		
		if (form.saleDate === '') {
		        form.saleDate = null;
		    }
		    if (form.handoverDate === '') {
		        form.handoverDate = null;
		    }
		    if (form.occupancyDate === '') {
		        form.occupancyDate = null;
		    }
		    if (form.renovationDate === '') {
		        form.renovationDate = null;
		    }
			if (lastNumber.xz === undefined) {
				console.log("未选择");
				form.buildingId = ''
				form.regionId = ''
				form.unitId = ''
			} else {
				form.regionId = lastNumber.xz[0]; // 第一个选项作为 regionId
				if (lastNumber.xz.length >= 2) {
					form.buildingId = lastNumber.xz[1]; // 第二个选项作为 buildingId
				}
				if (lastNumber.xz.length >= 3) {
					form.unitId = lastNumber.xz[2]; // 第三个选项作为 unitId
				}
			}
			
			console.log(form)
		$http.post("insertHouse", form).then((res) => {
			Object.assign(form, res.data);
			
				router.push({
					name: 'HouseList'
				});
		});
	};
	const loadAll = () => {
	    $http.post("findAll").then((res) => {
	        const data = res.data;
	        if (data && data.length > 0) {
	            // 使用 Map 来去重并组织数据
	            const regionsMap = new Map();
	
	            data.forEach(item => {
	                if (!regionsMap.has(item.regionId)) {
	                    regionsMap.set(item.regionId, {
	                        value: item.regionId,
	                        label: item.regionName,
	                        children: []
	                    });
	                }
	                
	                const region = regionsMap.get(item.regionId);
	
	                let building = region.children.find(b => b.value === item.buildingId);
	                if (!building) {
	                    building = {
	                        value: item.buildingId,
	                        label: item.buildingName,
	                        children: []
	                    };
	                    region.children.push(building);
	                }
	
	                let unit = building.children.find(u => u.value === item.unitId);
	                if (!unit) {
	                    unit = {
	                        value: item.unitId,
	                        label: item.unitName,
	                        children: []
	                    };
	                    building.children.push(unit);
	                }
	
	                unit.children.push({
	                    value: item.houseId,
	                    label: item.houseNumber
	                });
	            });
	
	            // 将 Map 转换为数组
	            const regionsArray = Array.from(regionsMap.values());
	
	            // 更新 options 数组
	            options.splice(0, options.length, ...regionsArray);
	        }
	    });
	};

	const loadBiaoQian=()=>{
		$http.post("findHouseBiaoQian").then((res)=>{
			data.biaoqian=res.data
		})
	}
</script>

<style scoped>
	.top {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.button {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
	}
	.conmit{
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
	}
	.f_top{
		margin-left: 10px;
	}
	.f_button{
		width: 1000px;
	}
	.el-select__wrapper el-tooltip__trigger el-tooltip__trigger{
		height: 40px;
	}
	.el-input{
		height: 40px;
		
	}
	.el-form-item__label{
		width: 150px;
	}
	.but1{
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #7e8081;
		background-color: #fafafa;
	}
	.but2{
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}
</style>